<template>
  <div class="dispatchPlanOne-wrapper">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="查询发运计划" name="first">
        <div class="dispatchPlanOne-search">
          <div class="search-header">
            <el-form class="search-form search-less" v-if="!showMore">
              <el-form-item label="计划状态:">
                <el-row>
                  <el-button :label="this.emptyVal" :key="this.emptyVal" @click="handleStatusListLess()" :class="{statusActive:this.emptyVal===statusCurrentLess}" type="text" plain>全部</el-button>
                  <el-button v-for ="item in  $dictUtils.getDictList('transPlanState')" :label="item.value" :key="item.value" @click="handleStatusListLess(item.value)" :class="{statusActive:item.value===statusCurrentLess}" type="text" plain>{{ item.label }}</el-button>
                </el-row>
              </el-form-item>
              <el-form-item class="search-keyword search-form-bottom" label="关键字:">
                <el-input placeholder="输入货物/收货人/承运商/业务编号/派车编号等"  v-model="queryForm.keyword"></el-input>
                <el-button class="search-btn" type="primary" @click="onPlanSubmit">查询</el-button>
                <el-button @click="reset">重置</el-button>
                <div class="more" @click="handleShowMore">更多筛选条件<i class="el-icon-arrow-down"></i></div>
              </el-form-item>
            </el-form>
            <el-form class="search-form search-more" v-if="showMore"   label-width="80px">
              <el-form-item label="计划状态:">
                <el-row>
                  <el-button :label="this.emptyVal" :key="this.emptyVal" @click="handleStatusListLess()" :class="{statusActive:this.emptyVal===statusCurrentLess}" type="text" plain>全部</el-button>
                  <el-button v-for ="item in  $dictUtils.getDictList('transPlanState')" :label="item.value" :key="item.value" @click="handleStatusListLess(item.value)" :class="{statusActive:item.value===statusCurrentLess}" type="text" plain>{{ item.label }}</el-button>
                </el-row>
              </el-form-item>
              <el-form-item label="派车情况:">
                <el-row>
                  <el-button v-for ="(item,index) in carStatus" :key="index" @click="handleCarStatusList(index)" :class="{statusActive:index===carCurrentStatus}" type="text" plain>{{item}}</el-button>
                </el-row>
              </el-form-item>
              <el-form-item label="派车日期:">
                <el-row>
                  <el-button v-for ="(item,index) in dataStatus" :key="index" @click="handleDateStatusList(index)" :class="{statusActive:index===dataCurrentStatus}" type="text" plain>{{item}}</el-button>
<!--                  <div class="block">-->
                    <span class="custom-date">自定义:</span>
                  <el-date-picker
                    v-model="inputDate"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
<!--                  </div>-->
                </el-row>

              </el-form-item>
              <div class="receiving parallel">
                <el-form-item label="收货单位:">
                  <el-input class="selectInput" v-model="queryForm.companyName" size="small" @focus="getCompanyClient">
<!--                    <template slot="append"><span @click="getCompanyClient">选择</span></template>-->
                  </el-input>
                </el-form-item>
                <el-form-item label="收货信息:">
                  <el-input placeholder="输入货物人/联系电话/收货地址"  v-model="queryForm.receiveMsg"></el-input>
                </el-form-item>

              </div>
              <div class="parallel">
              <el-form-item label="承运商:">
                <el-input class="selectInput" v-model="queryForm.carrier" size="small" @focus="getCarrierCompanyClient">
<!--                  <template slot="append"><span @click="getCarrierCompanyClient">选择</span></template>-->
                </el-input>
              </el-form-item>
              <el-form-item label="货物名称:">
                <el-input class="selectInput" v-model="queryForm.productName" size="small" @focus="getProductClient">
<!--                  <template slot="append"><span @click="getProductClient">选择</span></template>-->
                </el-input>
              </el-form-item>
              </div>
              <div class="search-form-bottom">
              <el-button class="search-btn" type="primary" @click="onPlanSubmit">查询</el-button>
              <el-button @click="reset">重置</el-button>
              <div class="more" @click="handleShowMore">收起筛选条件<i class="el-icon-arrow-up"></i></div>
              </div>
            </el-form>
          </div>
          <div class="search-content">
            <div class="content-header">
              <el-row>
<!--                <el-button @click="edit" v-if="hasPermission('transportPlan:plan:edit')" plain>修改</el-button>-->
<!--                <el-button @click="delData" v-if="hasPermission('transportPlan:plan:del')" plain>删除</el-button>-->
<!--                <el-button @click="confirmState" v-if="hasPermission('transportPlan:plan:modifyState')" plain>确认</el-button>-->
<!--                <el-button @click="stopOrNo" v-if="hasPermission('transportPlan:plan:modifyState')" plain>暂停/恢复</el-button>-->
<!--                <el-button @click="suspend" v-if="hasPermission('transportPlan:plan:modifyState')" plain>中止</el-button>-->
<!--                <el-button plain>导出</el-button>-->
<!--                <el-button @click="transToCompany" v-if="hasPermission('transportPlan:plan::planAddCompanys')" plain>派给承运商</el-button>-->
<!--                <el-button @click="transCar" v-if="hasPermission('transportPlan:plan::planAddTrucks')" plain>直接派车</el-button>-->
                <el-button @click="checkAll" plain>全选</el-button>
                <el-button @click="exportExcel" plain>导出</el-button>
                  <section class="right-but" style="display:flex">
                      <el-button type="text" style="margin-right:-13px" @click="refreshList">
                          <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
                      </el-button>
                      <PopoverBut class="selectBut" ref="popoverBut" :checkedProps="checkedProps" :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
                  </section>
              </el-row>
            </div>
            <div class="content-center">
              <el-table
                :data="tableData"
                class="list-item"
                style="width: 100%"
                ref="tablePlan"
                v-loading="loading"
                @selection-change="handleSelectionChange"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  type="selection">
                </el-table-column>
                <el-table-column  width="240">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p><span style="margin-right: 15px">{{(page.pageNo - 1) * page.pageSize + scope.$index + 1}}</span> {{scope.row.createDate}}</p>
                    </div>
                    <div class="cell-row">
                      <ul>
                        <li><span class="title">货物:</span>{{scope.row.product.name}}</li>
                        <li><span class="title">运量:</span>{{scope.row.transQuantity}}</li>
                        <li><span class="title">车数:</span>{{scope.row.truckNumPlanned}}</li>
                      </ul>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="280">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p @click="showDetail(scope.row)"><span>发运计划编号：</span><a>{{scope.row.planCode}}</a></p>
                    </div>
                    <div class="cell-row">
                      <div class="cell-left">
                        <p>发货:</p>
                      </div>
                      <div class="cell-right">
                        <ul>
                          <li>
                              {{scope.row.sendAddress}}
                          </li>
                          <li>
                              {{scope.row.transContact}}
                          </li>
                          <li>
                              {{scope.row.transPhone}}
                          </li>
                        </ul>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column  min-width="460">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p><span>发运期间：</span> {{scope.row.sendStartDate}}-{{scope.row.sendEndDate}}</p>
                    </div>
                    <div class="cell-row">
                      <div class="cell-left">
                        <p>收货:</p>
                      </div>
                      <div class="cell-right">
                        <ul>
                          <li>{{scope.row.receiveAddress}}</li>
                          <li>{{scope.row.receiveContact}}</li>
                          <li>{{scope.row.receivePhone}}</li>
                        </ul>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="260">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p><span>业务编号：</span>{{scope.row.business.codes}}</p>
                    </div>
                    <div class="cell-row">
                      <div class="cell-left">
                        <p>承运:</p>
                      </div>
                      <div class="cell-right">
                        <ul>
                          <li  v-for="(item, index) in scope.row.planDetailList" :key="index" :label="item" >
                            <span v-for="(item1, index1) in item.company" :key="index1" :label="item1">
                              {{item1}}
                            </span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="120">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p>状态</p>
                    </div>
                    <div class="cell-status">
                      <p class="state empty" v-if="scope.row.state === 1"><span></span>{{$dictUtils.getDictLabel("transPlanState", scope.row.state, "")}}</p>
<!--                      <p class="dispatch-status examine"><span class="dispatch-status-note"></span>审批中</p>-->
                      <p class="state process" v-if="scope.row.state === 99"><span></span>{{$dictUtils.getDictLabel("transPlanState", scope.row.state, "")}}</p>
                      <p class="state normal" v-if="scope.row.state === 100"><span></span>{{$dictUtils.getDictLabel("transPlanState", scope.row.state, "")}}</p>
                      <p class="state invalid" v-if="scope.row.state === 101"><span></span>{{$dictUtils.getDictLabel("transPlanState", scope.row.state, "")}}</p>
                      <p class="state success" v-if="scope.row.state === 102"><span></span>{{$dictUtils.getDictLabel("transPlanState", scope.row.state, "")}}</p>
                      <p class="state invalid" v-if="scope.row.state === 103"><span></span>{{$dictUtils.getDictLabel("transPlanState", scope.row.state, "")}}</p>

                    </div>

                  </template>
                </el-table-column>
                <el-table-column  width="220">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p>执行情况</p>
                    </div>
                    <div class="cell-row">
                      <ul>
                        <li>已派车数：<span v-if="scope.row.truckNumExecuted!==undefined">{{scope.row.truckNumExecuted}}</span><span v-if="scope.row.truckNumExecuted==undefined">0</span>车</li>
                        <li>实际过磅：<el-link type="primary" @click="handleImplementForm(scope.row)">{{scope.row.netWeightCount}}车</el-link></li>
                        <li>实际发运：{{scope.row.netWeightNum}}吨</li>
                      </ul>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column width="120px">
                  <template slot-scope="scope">
                    <div class="cell-title">
                      <p>操作</p>
                    </div>
                    <div class="cell-row">
                      <ul>
                        <li><el-link type="primary" @click="edit(scope.row)" :underline="false" v-if="">修改</el-link></li>
                        <li><el-link type="primary" @click="delData(scope.row)" :underline="false">删除</el-link></li>
                        <li>
                          <el-dropdown  @command="handleCommand">
                            <span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon--right"></i></span>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item :command="{method:'confirmState', row:scope.row}" :disabled="scope.row.state === 100 || scope.row.state === 103">确认</el-dropdown-item>
                              <el-dropdown-item :command="{method:'stopOrNo', row:scope.row}" :disabled="scope.row.state === 103 || scope.row.state === 101 || scope.row.state === 1">暂停</el-dropdown-item>
                              <el-dropdown-item :command="{method:'stopOrNo', row:scope.row}" :disabled="scope.row.state !== 101 || scope.row.state === 1">恢复</el-dropdown-item>
                              <el-dropdown-item :command="{method:'suspend', row:scope.row}" :disabled="scope.row.state === 103 || scope.row.state === 1">中止</el-dropdown-item>
                              <el-dropdown-item :command="{method:'transToCompany', row:scope.row}">派给承运商</el-dropdown-item>
                              <el-dropdown-item :command="{method:'detailButton', row:scope.row}">派给无车承运人</el-dropdown-item>
                              <el-dropdown-item :command="{method:'transCar', row:scope.row}">直接派车</el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                        </li>
                      </ul>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="page.pageSize"
                :current-page="page.pageNo"
                layout="total,sizes,prev, pager, next, jumper"
                :total="page.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="创建发运计划" name="second">
        <div class="create-dispatch">
          <div class="create-dispatch-header">
            <el-steps :active="1">
              <el-step title="选择业务类型" description="选择相关业务。此处仅显示“未执行完”的业务。"></el-step>
              <el-step title="填写发运计划内容" description="填写货物、发运量、收发货地址、承运商、发运期间等信息。"></el-step>
              <el-step title="发布发运计划" description="仔细核对所填写的信息并进行确认。"></el-step>
            </el-steps>
          </div>
          <div class="create-dispatch-content">
            <div class="content-title">
              <el-form :inline="true">
                <el-form-item label="关键字:">
                  <el-input v-model="queryForm.keyword" placeholder="输入关键字进行查询"></el-input>
                </el-form-item>
                <el-form-item label="业务类型:">
                  <el-select clearable v-model="queryForm.processType">
                    <el-option
                      label="---请选择---"
                      :value="0"></el-option>
                    <el-option
                      v-for="item in  $dictUtils.getDictList('processType')"
                      :key="item.value"
                      :label="item.label"
                      :value="Number(item.value)">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button class="search-btn" type="primary" @click="onSubmit">查询</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="content-table">
              <el-table
                :data="dispatchTableData"
                stripe
                border
                style="width: 100%"
                v-loading="loading"
                :row-class-name="tableRowClassName2"
              >
                <el-table-column type="index" label="序号" width="70">
                  <template slot-scope="scope">
                    <span>{{
                      (page.pageNo - 1) * page.pageSize + scope.$index + 1
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="类型" prop="processType" min-width="80">
                  <template slot-scope="scope">
                    {{$dictUtils.getDictLabel("processType", scope.row.processType, "")}}
                  </template>
                </el-table-column>
                <el-table-column label="业务编号" prop="codes" width="150"></el-table-column>
                <el-table-column label="数据类别" prop="dataType" min-width="120">
                  <template slot-scope="scope">
                    {{$dictUtils.getDictLabel("dataType", scope.row.dataType, "")}}
                  </template>
                </el-table-column>
                <el-table-column label="往来名称" prop="companyName" width="200"></el-table-column>
                <el-table-column label="货物" prop="productName" min-width="180"></el-table-column>
                <el-table-column label="已派车数" prop="executedCount" min-width="110"></el-table-column>
                <el-table-column label="已过磅数量" prop="netWeightCount" width="130"></el-table-column>
                <el-table-column label="余量" prop="surpQuantity"></el-table-column>
                <el-table-column label="余额" align="right" prop="surpMoney" min-width="110">
                    <template slot-scope="scope">
                       {{scope.row.surpMoney | thousandSep}}
                    </template>

                </el-table-column>
                <el-table-column label="备注" prop="remark" min-width="120"></el-table-column>
                <el-table-column label="发运计划" align="left" width="120">
                  <template slot-scope="scope">
                    <span>无</span>
                    <el-link type="primary"  @click="add(scope.row)">创建</el-link>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="content-bottom">
              <el-pagination
                background
                @size-change="handleSizeNewChange"
                @current-change="handleCurrentNewChange"
                :page-size="page2.pageSize"
                :current-page="page2.pageNo"
                layout="total,sizes,prev, pager, next, jumper"
                :total="page2.total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <addDispatchPlanForm ref="addDispatchPlanForm" mode="2" @refreshDataList="getPlanList()">

    </addDispatchPlanForm>
    <implementForm ref="implementForm"></implementForm>
    <!--客户选择弹窗-->
    <ReceiveCompanyDialog ref="receiveCompanyDialog" @getCompanyData="getCompanyData">

    </ReceiveCompanyDialog>
    <!--承运商选择弹窗-->
    <CarrierCompanyDialog ref="carrierCompanyDialog" @getCarrierData="getCarrierData">

    </CarrierCompanyDialog>
    <!--产品选择弹窗-->
    <ProductDialog ref="ProductDialog" @getProductData="getProductData">

    </ProductDialog>
    <!-- 详情页 -->
    <dispatchDetail ref="dispatchDetail">

    </dispatchDetail>
    <!-- 直接派车页 -->
    <DirectlyAssignationForm ref="directlyForm" @refreshDataList="getPlanList()">

    </DirectlyAssignationForm>
    <!-- 派给承运商 -->
    <PlanToCompany ref="planToCompany" @refreshDataList="getPlanList()">

    </PlanToCompany>
  </div>
</template>

<script>
  import addDispatchPlanForm from '@/views/modules/transport/dispatchPlanOne/addDispatchPlanForm'
  import implementForm from '@/views/modules/transport/dispatchPlanOne/implementForm'
  import dispatchDetail from '@/views/modules/transport/carAssignation/dispatchDetail'
  import CompanyDialog from '@/components/dialog/companyDialog.vue'
  import ProductDialog from '@/components/dialog/productDialog.vue'
  import PlanToCompany from '@/views/modules/transport/carAssignation/planToCompany'
  import DirectlyAssignationForm from '@/views/modules/transport/carAssignation/directlyAssignationForm'
  import ReceiveCompanyDialog from '@/components/dialog/receiveCompanyDialog.vue'
  import CarrierCompanyDialog from '@/components/dialog/carrierCompanyDialog.vue'
  import { getNotFinishedList, getPlanList, delData, modifyState } from '@/api/transplan/transplan.js'
  import PopoverBut from '@/components/button/popoverBut'
  const options1 = []
    export default {
      name: 'dispatchPlanOneForm',
      components: {
        addDispatchPlanForm,
        implementForm,
        dispatchDetail,
        CompanyDialog,
        ProductDialog,
        PlanToCompany,
        ReceiveCompanyDialog,
        CarrierCompanyDialog,
        DirectlyAssignationForm,
        PopoverBut
      },
      data () {
        return {
          checkedProps: options1,
          options: [],
          showMore: false,
          activeName: 'first',
          statusCurrentLess: '',
          statusCurrentMore: 0,
          carCurrentStatus: 0,
          dataCurrentStatus: 0,
          statusListLess: ['全部', '草稿', '审批中', '待派车', '执行中', '暂停执行', '执行完', '中止', '退回'],
          statusListMore: ['全部', '未生效', '未执行', '执行中', '执行完', '执行中止'],
          carStatus: ['全部', '已派车', '未派车'],
          dataStatus: ['今日', '本周', '本月', '上月', '本年', '近7日', '近15日', '近30日'],
          // activeNames: ['0'],
          value1: '',
          inputDate:'',
          emptyVal: '',
          receivingCompany: [],
          receivingCompanyValue: '',
          carriers: [],
          carriersValue: '',
          cargos: [],
          cargosValue: '',
          tableData: [
          ],
          stateVal: 101,
          companyTable: [],
          dispatchTableData: [],
          input: '',
          currentPage1: 5,
          page: {
            pageSize: 10,
            pageNo: 1,
            total: 0
          },
          falg: true,
          flag2: true,
          page2: {
            pageSize: 10,
            pageNo: 1,
            total: 0
          },
          ids: '',
          selectDatas: [],
          queryForm: {
            pageSize: 10,
            pageNo: 1,
            props: 1,
            orderBy: '',
            orderByAORC: '',
            keyword: '',
            processType: '',
            state: '',
            dispatchingStatus: '',
            selectDateType: '',
            receiveAddress: '',
            createDate: '',
            receiveMsg: '',
            productId: '',
            productName: '',
            companyName: '',
            companyId: '',
            carrier: '',
            carrierId: ''
          },
          loading: false,
          viewForm: {}
        }
      },
      methods: {
        handleClick (tab, event) {
          if (tab.index === '1') {
            this.getNotFinishedList()
          }
          if (tab.index === '0') {
            this.getPlanList()
          }
        },
        reset () {
          this.inputDate = ''
          this.queryForm.state = ''
          this.statusCurrentLess = ''
          this.queryForm.keyword = ''
          this.queryForm.dispatchingStatus = ''
          this.carCurrentStatus = ''
          this.queryForm.selectDateType = ''
          this.dataCurrentStatus = ''
          this.queryForm.startDate = ''
          this.queryForm.endDate = ''
          this.queryForm.companyName = ''
          this.queryForm.companyId = ''
          this.queryForm.receiveMsg = ''
          this.queryForm.carrier = ''
          this.queryForm.carrierId = ''
          this.queryForm.productName = ''
          this.queryForm.productId = ''
          this.queryForm.processType = ''
        },
        getPlanList () {
          this.loading = true
          if(this.inputDate == null){
            this.queryForm.startDate = null
            this.queryForm.endDate = null
          }else{
            this.queryForm.startDate = this.inputDate[0]
            this.queryForm.endDate = this.inputDate[1]
          }
          this.queryForm.pageSize = this.page.pageSize
          this.queryForm.pageNo = this.page.pageNo
          this.queryForm.orderBy = 'create_date'
          this.queryForm.orderByAORC = 'desc'
          getPlanList(this.queryForm).then(({data}) => {
            if (data.code === '200') {
              this.tableData = data.result.list
              // this.companyTable = data.result.list
              this.page.total = data.result.count
              this.loading = false
            }
          })
        },
        handleSelectionChange (val) {
          this.selectDatas = val
        },
          // 是否显示某列数据
          handlerCloumn(e) {
              this.checkedProps = e
          },
          refreshList () {
              this.getPlanList()
          },
        checkAll () {
          this.$refs.tablePlan.toggleAllSelection()
        },
        exportExcel () {
          this.$utils.download('/transportPlan/plan/export')
        },
        handleCommand (command) {
          if (command.method === 'confirmState') {
            this.confirmState(command.row)
          } else if (command.method === 'stopOrNo') {
            this.stopOrNo(command.row)
          } else if (command.method === 'suspend') {
            this.suspend(command.row)
          } else if (command.method === 'transToCompany') {
            this.transToCompany(command.row)
          } else if (command.method === 'transCar') {
            this.transCar(command.row)
          } else if (command.method === 'detailButton') {
            this.detailButton(command.row)
          }
        },
        edit (row) {
          this.$refs.addDispatchPlanForm.init('edit', row)
        },
        modifyState (id, state) {
          modifyState({
            ids: id,
            state: state
          }).then(({data}) => {
            if (data.code === '200') {
              this.$message({
                type: 'success',
                message: '更新状态成功!'
              })
              this.getPlanList()
            }
          })
        },
        stopOrNo (row) {
          this.modifyState(row.id, 101)
        },
        confirmState (row) {
          this.modifyState(row.id, 100)
        },
        suspend (row) {
          this.modifyState(row.id, 103)
        },
        detailButton2 (row) {
          this.$refs.dispatchDetail.init('viewDetail', row)
        },
        delData (row) {
          this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then((data) => {
            delData({
              ids: row.id
            }).then(({data}) => {
              if (data.code === '200') {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.getPlanList()
              }
            })
          })
        },
        // 直接派车
        transCar (row) {
            this.$refs.directlyForm.init('execPlanCar', row.id)
        },
        // 派给承运商
        transToCompany (row) {
          this.$refs.planToCompany.init('execPlanCompany', row.id)
        },
        // 收货地址选择弹窗
        getCompanyClient () {
          this.$refs['receiveCompanyDialog'].init('receiveCompany', 1)
        },
        // 收货地址选择数据回显
        getCompanyData (row) {
          this.queryForm.companyName = row.names
          this.queryForm.companyId = row.id
          this.dialogVisible = false
        },
        // 承运商选择弹窗
        getCarrierCompanyClient () {
          this.$refs['carrierCompanyDialog'].init('carrier', 3)
        },
        // 承运商选择数据回显
        getCarrierData (row) {
          this.queryForm.carrier = row.names
          this.queryForm.carrierId = row.id
          this.dialogVisible = false
        },
        // 货物选择弹窗
        getProductClient () {
          this.$refs['ProductDialog'].dialogVisible = true
        },
        getProductData (row) {
          this.queryForm.productName = row.name
          this.queryForm.productId = row.id
          this.dialogVisible = false
        },
        // 日期选择
        changeHandlerDate (e) {
          this.queryForm.selectDateType = 8
          this.queryForm.startDate = e[0]
          this.queryForm.endDate = e[1]
        },
        getNotFinishedList () {
          this.loading = true
          this.queryForm.pageSize = this.page.pageSize
          this.queryForm.pageNo = this.page.pageNo
          this.queryForm.orderBy = ''
          this.queryForm.orderByAORC = ''
          getNotFinishedList(this.queryForm).then(({data}) => {
            if (data.code === '200') {
              this.dispatchTableData = data.result.list
              this.page2.total = data.result.count
              this.loading = false
            }
          })
        },
        onPlanSubmit () {
          this.getPlanList()
        },
        onSubmit () {
          this.getNotFinishedList()
        },
        handleStatusListLess (index) {
          this.queryForm.state = index
          this.statusCurrentLess = index
        },
        handleStatusMoreList (index) {
          this.statusCurrentMore = index
        },
        handleCarStatusList (index) {
          this.queryForm.dispatchingStatus = index
          this.carCurrentStatus = index
        },
        handleDateStatusList (index) {
          this.queryForm.selectDateType = index
          this.dataCurrentStatus = index
        },
        handleChange (val) {
        },
        handleShowMore () {
          this.showMore = !this.showMore
        },
        handleSizeChange (e) {
          this.page.pageSize = e
          this.getPlanList()
        },
        handleCurrentChange (e) {
          this.page.pageNo = e
          this.getPlanList()
        },
        handleSizeNewChange (e) {
          this.page2.pageSize = e
          this.getPlanList()
        },
        handleCurrentNewChange (e) {
          this.page2.pageNo = e
          this.getNotFinishedList()
        },
        tableRowClassName ({ row, rowIndex }) {
          if (rowIndex % 2 === 1) {
            return 'warning-row'
          } else {
            return 'success-row'
          }
        },
        tableRowClassName2 ({ row, rowIndex }) {
          if (rowIndex % 2 === 1) {
            return 'warning-row'
          } else {
            return 'success-row'
          }
        },
        add (row) {
          this.$refs.addDispatchPlanForm.init('add', row)
        },
        handleImplementForm (row) {
          this.$refs.implementForm.init('implement', row)
        },
        showDetail (row) {
          this.$refs.dispatchDetail.init('detail', row)
        },
        detailButton (row) {
          this.$refs.planToCompany.init('noCarCompany', row.id)
        }
      },
      mounted () {
        this.getPlanList()
          this.$refs.popoverBut.disable = true
      }
    }
</script>

<style lang="scss" scoped>
    @import '@/assets/scss/config.scss';
  .dispatchPlanOne-wrapper{
    margin:-20px;

    ::v-deep>.el-tabs{
      .el-tabs__header{
        margin-bottom: 0;
        .el-tabs__item{
          width: 166px;
          height: 50px;
          line-height: 48px;
          border: 1px solid transparent;
          /*border-radius: 6px 0px 0px 0px;*/
          font-size: 17px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          text-align: center;
          padding: 0;
        }
        .el-tabs__item.is-active{
          background: $--color-primary-liyu;
          border-color: #EEEEEE;
          color: #FFFFFF;
        }
        .el-tabs__active-bar{
          display: none;
        }
        .el-tabs__nav-wrap::after{
          height: 1px;
          background: #EEEEEE;
        }
      }
      .el-tabs__content{
        .el-tab-pane:first-child{
          padding: 15px 20px;
          .dispatchPlanOne-search{
            .search-header{
              .search-less>.el-form-item:first-child{
                margin-bottom: 13px;
              }
              .search-less{
                .search-form-bottom{
                  margin-bottom: 20px;
                }
              }
              .search-more>.el-form-item{
                margin-bottom: 20px;
              }
              .search-more{
                .search-form-bottom{
                  margin-bottom: 20px;
                }
                .el-input input{
                  width: 350px;
                }
              }
              .search-more>.el-form-item:first-child,.search-more>.el-form-item:nth-child(2){
                margin-bottom: 13px;
              }
              .el-form-item__content{
                line-height: inherit;
              }
              .el-button--text.is-plain{
                padding: 5px 9px;
                border-radius: 4px;
                font-size: 16px !important;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                margin-top: 2px;
                line-height: inherit;
                min-width: fit-content;
                height: fit-content;
              }
              .el-button--text.statusActive,.el-button--text.is-plain:hover{
                color: $--color-primary-liyu;
                border: 1px solid $--color-primary-liyu;
              }
              .el-input {
                width: inherit;
                input {
                  width: 350px;
                }
                .el-input__inner::-webkit-input-placeholder {
                  color: #999999;
                }
              }
              .search-more{
                .custom-date{
                  margin-left: 31px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                }
                .search-form-bottom{
                  text-align: center;
                  .el-button--primary{
                    margin-left: 0;
                  }
                }

                .el-form-item .el-date-editor{
                  width: 280px;
                  border: 1px solid #AAAAAA;
                  margin-left: 12px;

                  .el-range-separator{
                    width: 10%;
                    line-height: 28px;
                  }
                  .el-range__icon{
                    line-height: 28px;
                  }

                }
                .more-item-label{
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  width: 90px;
                }
                .el-select{
                  .el-input__inner{
                    width: 460px;
                    height: 36px;
                    border: 1px solid #AAAAAA;
                    border-radius: 4px;
                  }
                }
                .parallel{
                  display: flex;
                  .el-form-item{
                    display: flex;
                    margin-bottom: 20px;
                    .el-form-item__content{
                      margin-left: 0 !important;
                    }
                  }
                  .el-form-item:first-child{
                    margin-right: 30px;
                  }
                }
              }
              .search-keyword{
                display: flex;
              }
              .search-form-bottom{
                .el-button--primary {
                  margin-left: 50px;
                }
              }
              .more{
                display: inline-block;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #666666;
                margin-left: 47px;
                cursor: pointer;
              }
            }
            .search-content{
              .content-header{
                .el-button--default.is-plain{
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  padding: 0;
                  width: 60px;
                  height: 36px;
                  border: 1px solid #AAAAAA;
                  border-radius: 4px;
                }
                .el-button--default.is-plain:nth-child(4){
                  width: 99px;
                }
              }

            }

          }

        }

      }

    }
    .search-content .content-center{
      p{
        margin: 0;
      }
      ::v-deep.el-table{
        .el-table__body{
          width: 100% !important;
        }
        .el-table__header-wrapper{
          display: none;
        }
        .el-table-column--selection{
          .cell{
            text-align: center;
            border-left: 1px solid #dddddd;
            padding-bottom: 0;
            min-height: 150px;
            border-left: 1px solid #dddddd;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            position: absolute;
            top: 10px;
            bottom: 0;
            width: 50px;
            label{
              display: inline-block;
              width: 100%;
              background: #EEEEEE;
              height: 40px;
              line-height: 40px;
            }
          }
        }
        .el-table__row{
          border-bottom: 1px solid #DDDDDD;
          box-shadow: 0px 0px 6px 0px rgba(4, 0, 0, 0.1);
          border-radius: 6px;

        }
        .el-table__row.warning-row{
          background: #FFFFFF;
        }
        td{
          vertical-align: top;
          border-bottom: 1px solid #DDDDDD;
          padding-bottom: 0;
          padding-top: 10px;

          .cell{
            .cell-title{
              color: #333333;
              span{
                color: #999999;
              }
                a{
                    color: $--color-primary-liyu;
                    cursor: pointer;
                }
            }
            .cell-left{
              color: #999999;
              width: 43px;
            }
            .cell-right{
              flex: 1;
            }
          }
        }
        td:last-child .cell{
          border-right: 1px solid #DDDDDD;
          position: absolute;
          top: 9.5px;
          bottom: 0;
          width: 100%;
          .el-link{
            .el-link--inner{
              text-decoration: none;
            }
          }
        }
        .cell{
          padding: 0;
          border-top: 1px solid #DDDDDD;
          min-height: 150px;


          .cell-title{
            background: #EEEEEE;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
            padding: 0 20px;
          }
          ul{
            list-style: none;
            padding-left: 0;
            margin: 0;
          }
          .cell-row{
            display: flex;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
            padding: 14px 20px;

            li{
              margin-top: 5px;

              span.title{
                display: inline-block;
                color: #999999;
                width: 43px;
              }
            }
            li:first-child{
              margin-top: 0;

            }
          }
          .cell-status{
            padding-top: 14px;
          }
        }
        .el-table__body tr:hover>td{
          background-color: #ffffff !important;
        }
        .el-link.is-underline:hover:after{
          border-bottom: none;
        }
        /*.el-link--inner{*/
        /*  text-decoration: underline;*/
        /*}*/
      }
    }

    .create-dispatch{
      .create-dispatch-header{
        margin-top:40px;
        padding-bottom:10px;
        background:#f1f2f5;

        ::v-deep.el-steps--horizontal{
          padding: 0 50px;
          height: 120px;
          background: #ffffff;
          border-radius: 4px;

          .el-step.is-horizontal:first-child{
            flex-basis:35% !important;
          }
          .el-step.is-horizontal:nth-child(2){
            flex-basis:38% !important;
          }
          .el-step__head{
            .el-step__line{
              /*width: 300px;*/
              height: 2px;
              top: 20px;
              right: 30px;
              background: #DDDDDD;
            }
            .el-step__icon.is-text{
              width: 40px;
              height: 40px;
              border: none;

              .el-step__icon-inner{
                font-size: 22px;
                font-family: Arial;
                font-weight: 400;
              }
            }
          }
          .el-step__head.is-finish{
            .el-step__line{
              left: 213px;
            }
            .el-step__icon.is-text{
              background: $--color-primary-liyu;
              .el-step__icon-inner{
                color: #ffffff;
              }
            }
          }
          .el-step__head.is-process{
            .el-step__line{
              left: 257px;
            }
          }
          .el-step__head.is-process,.el-step__head.is-wait{
            .el-step__icon.is-text{
              background: #DDDDDD;
              .el-step__icon-inner{
                color: #ffffff;
              }
            }
          }
          .el-step__main{
            position: absolute;
            top: 0;
            left: 70px;
            .el-step__title{
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              line-height: 40px;
            }

            .el-step__title.is-finish{
              font-weight: bold;
              color: #333333;
            }
            .el-step__title.is-finish{
              color: #333333;
            }
            .el-step__title.is-process,.el-step__description.is-process,.el-step__title.is-wait,.el-step__description.is-wait{
              color: #999999;
            }
            .el-step__description{
              width: 282px;
              height: 45px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              margin-top: 6px;
              line-height: 25px;
            }
            .el-step__description.is-finish{
              color: #666666;
            }
          }
        }

      }
      .create-dispatch-content{
        padding: 20px;
        .content-title{
          ::v-deep.el-form{
            .el-form-item{
              margin: 0;
            }
            .el-form-item:first-child{
              margin-right: 50px;
                .el-input__inner{
                    width: 230px;
                }
            }
            .el-button--primary {
              margin-left: 50px;
            }
          }
        }
        .content-table{
          ::v-deep.el-table {
            margin-top: 20px;
            .el-table__header-wrapper{
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
            }
            th{
              height: 46px;
              background: #EEEEEE;
              padding: 0;
              /*border-color: #dddddd;*/
            }

            .el-table__row{
              td{
                padding: 14px 0;
                /*border-color: #dddddd;*/
              }
              /*td:not(:nth-child(4)) .cell{*/
              /*  text-align: center;*/
              /*}*/
              td:last-child .cell{
                span{
                  margin-right: 15px;
                }
              }
              .cell{
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                /*padding: 6px 5px;*/
                box-sizing: content-box;
                /*height: 46px;*/
              }
              .el-link,.el-dropdown-link,.el-icon-arrow-down{
                font-size: 16px;
              }
              .el-dropdown-link {
                cursor: pointer;
              }
              .el-link--inner{
                margin-right: 10px;
              }
              .el-link:last-child .el-link--inner{
                margin-right: 0;
              }
              .el-link.is-underline:hover:after{
                border-bottom: none;
              }
            }
          }
        }
      }
    }
  }

</style>
